<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
           width: 100%;
           height: 100vh;
           position: relative;

        }
        .wrap video{
            width: 100%;
            height: 100%;
        }
        .ctrl{
          position: absolute;
          top: 48%;
          left:48%;
          z-index: 99;
        }
    </style>
    <title></title>
</head>

<body>


    <div class="wrap">
        <span class="ctrl" id="ctrl"><svg t="1685009016655" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354" width="50" height="50"><path d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z" fill="#fff" p-id="2355"></path></svg></span>
       <video id="myvideo" src="./img/video-1.mp4" webkit-playsinline="true"
       playsinline="true"
       x-webkit-airplay="true"
       x5-video-player-type="h5"
       x5-video-orientation="portraint"
       preload="auto"></video>
    </div>
    <script>
     var myvideo = document.getElementById('myvideo');
     var ctrl = document.getElementById('ctrl').onclick=function(){
        console.log('a');
         if(myvideo.paused){
             myvideo.play()
         }else{
             myvideo.pause()
         }

     }


    </script>
</body>

</html>